<template>
	<div class="userbox">
		<div class="title">{{ $t('menu.productionList') }}{{ disabled?$t('table_data.detail'):$t('table_data.edit') }}</div>
		<div class="formdata">
			<el-form :model="productionForm" :rules="rules" ref="productionForm" label-width="auto" label-position="right">
				<div class="left-side">
					<el-form-item :label="$t('preview_data.name')" prop="productionName.en_US" >
						<el-input v-model="productionForm.productionName.en_US" clearable :placeholder="$t('movie_data.form.en_US')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="productionName.ja_JP" >
						<el-input v-model="productionForm.productionName.ja_JP" clearable :placeholder="$t('movie_data.form.ja_JP')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="productionName.zh_CN" >
						<el-input v-model="productionForm.productionName.zh_CN" clearable :placeholder="$t('movie_data.form.zh_CN')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="productionName.zh_TW" >
						<el-input v-model="productionForm.productionName.zh_TW" clearable :placeholder="$t('movie_data.form.zh_TW')" :disabled="disabled"></el-input>
					</el-form-item>
				</div>
			</el-form>
		</div>
		
		<div id="footer">
			<el-button @click="closeTag">{{$t('components.upload.cancel')}}</el-button>
			<el-button type="primary" v-if="$route.query.type != 'detail'" :loading="isLoading" @click="submit">{{$t('table_data.saveText')}}</el-button>
		</div>
	</div>
</template>

<script>
import  { ruleData } from '@/mixin/rule'

	export default {
		emits: ['success', 'closed'],
		components: {},
		mixins: [ruleData],
		data() {
			return {
				isLoading: false,
			}
		},
		watch: {},
		computed: {
			icon() {
				// return function(){
					const dUrl = decodeURIComponent(this.form.fileUrl);
					const str = dUrl.split('?')[0].split('.');
					const type = str[str.length-1];
					if(type){
						if(['jpg','jpeg','png','gif','webp','tiff','bmp','heif','svg'].includes(type)){
							return 'sc-icon-img'
						}else if(['mp3','wma','ape'].includes(type)){
							return 'sc-icon-mp3'
						}else if(['mp4','mp5','avi','wmv'].includes(type)){
							return 'sc-icon-video'
						}else if(['pdf','txt','xlsx'].includes(type)){
							return 'sc-icon-pdf'
						}else{
							return 'sc-icon-none'
						}
					}
					return 'sc-icon-none'
				// }
			},
			oicon(){
				return function(e){
					return e
				}
			},
		},
		created(){
			this.disabled = this.$route.query.type=='detail'?true:false;
			const tagTitle = `${this.$t('menu.productionList')}${this.disabled?this.$t('table_data.detail'):this.$t('table_data.edit')}`;
			this.$store.commit("updateViewTagsTitle", tagTitle);
			this.getInfo();

		},
		methods: {
			async getInfo(){
				if(this.$route.query.id == 'add' || !this.$route.query.id){
					return
				}
				try {
					this.productionForm = {
						productionName: JSON.parse(this.$route.query.data),
						productionId: this.$route.query.id
					};
				} catch(e) {
					this.productionForm = {
						productionName: {
							"en_US": "",
							"ja_JP": "",
							"zh_CN": "",
							"zh_TW": ""
						},
						productionId: this.$route.query.id
					}
				}
			},
			closeTag(){
				const tagList = this.$store.state.viewTags.viewTags;
				const tag = this.$route;
				const nowTagIndex = tagList.findIndex(item => item.fullPath == tag.fullPath)
				this.$store.commit("removeViewTags", tag)
				this.$store.commit("removeIframeList", tag)
				this.$store.commit("removeKeepLive", tag.name)

				const leftView = tagList[nowTagIndex - 1]
				if (leftView) {
					this.$router.push(leftView)
				} else {
					this.$router.push('/')
				}
			},
			//表单提交方法
			submit(){
				this.$refs.productionForm.validate(async (valid) => {
					if (valid) {
						try {
							this.isSaveing = true;
							let api = this.$API.rule.postProduction;
							const res = await api.post(this.productionForm);
							this.isSaveing = false;
							if(res.code == 'OK'){
								this.closeTag();
								this.$message.success(this.$t('table_data.operasucc'))
							}else{
								this.isSaveing = false;
							}

						} catch(e) {
							console.warn(e);
							this.isSaveing = false;
						}
					} else {
						this.$message({
							message: this.$t('form_data.uploadIng'),
							type: 'warning'
						});
					}
				})
			},

		}
	}
</script>

<style scoped>
.scTable {width: 50%;}
.contbox {
	width: 375px;
	height: 750px;
}
.userbox {
	background: #fff;
	padding: 20px;
	margin: 16px;
	border: 1px solid #CCCCCC;
	border-radius: 4px;
}
.userbox .title {
	font-size: 20px;
	font-weight: 400;
	margin-bottom: 24px;
}
.grid-content {
	border: 1px solid #eee;
	font-size: 14px;
	min-height: 50px;
	/* line-height: 50px; */
	padding-left: 12px;
	display: flex;
  align-items: center;
}
.bg-purple {
	background: #F6F8F9;
	color: #888;
	display: flex;
  align-items: center;
}
:deep .el-step__head.is-process {
	color: #BB9B51 !important;
	border-color: #BB9B51 !important;
}
:deep .el-step {
	cursor: pointer;
}

.el-col-list {
	flex: 0 0 33.3%;
}
.bg-purple-light {
	color: #000;
}
.el-form {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.box-card {
	width: 100%
}
:deep .el-upload-list {
	max-height: 150px;
  overflow-y: scroll;
}
:deep .el-transfer {
    width: 80%;
  margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
:deep .el-transfer-panel__filter {
    width: 93%;
}
.chooseCinemabox-title {
    font-size: 20px;
  margin: 0 auto 20px;
}
.chooseCinemabox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* width: 85%; */
    margin: 0 auto 30px;
    font-size: var(--el-form-label-font-size);
}
:deep .el-transfer-panel {
    width: 40%;
}
.scrollbox {
	width: 100%;
	overflow-y: scroll;
	display: flex;
	max-height: 400px;
	flex-wrap: wrap;
}
.scrollbox-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 1px solid #eee;
	margin: 0 10px 10px 0;
}
.sortNuminput {
	display: flex;
}
.scrollbox .uImg {
	width: 200px;
	height: auto;
}
.left-side, .right-side {
	width: 46%;
}
.uploadbtn {
	cursor: pointer;
}
.uploadbtn:hover {
	color: var(--el-color-primary);
}
.item {
	width: 100%;
	display: flex;
	align-items: flex-start;
}
.tips {
	color: #888;
	font-size: 14px;
	width: 100%;
}
.uploadTips {
	margin-left: 10px;
	height: 120px;
	line-height: 200px;
	color: #888;
	font-size: 14px;
}
.del {
	padding-top: 8px;
	font-size: 22px;
	color: red;
	cursor: pointer;
}

.datebox {
	width: 100%;
	display: flex;
	justify-content: flex-start;
}
.datebox_left,.datebox_right {
	width: 50%;
}
.item-right {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	height: 118px;
}
.el-form-item {
	width: 100%;
}
.leftlabel {
	width: 120px;
}
.el-select {
	width: 100%;
}
.item-lastName {
	display: flex;
	justify-content: space-between !important;
	align-content: space-between !important;
	/* height: 200px; */
	width: 100%;
	margin-bottom: 18px;
}
.item-desc {
	/* height: 500px; */
}
.icon {
	width: auto;
  height: 40px;
}
.item-right{
	height: 140px;
}
.head {
	width: 500px;
  height: 281px;
}
.background {
	width: 500px;
	height: 300px;
}
.rightInput {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-content: space-between;
	width: 100%;
}
.textarea {
	height: 600px;
}
.item-right-form {
	display: flex;
}
.item>div:nth-child(2){
	margin-left: 200px;
}
#footer {
	display: flex;
	justify-content: center;
	margin-top: 10px;
}


@media only screen and (max-width: 750px) {
	.left-side, .right-side {
		width: 100%;
	}
	.el-form {
		flex-wrap: wrap;
	}
}
</style>
